<template>
  <div class="h-full pl pr flex" @contextmenu.prevent="$event.preventDefault()">
    <div class="h-full flex-1 flex gap-2px">
      <home-logo class="font-size-5 h-full flex-center ml-2 mr-2 fw700"/>
      <home-header-item @click="appStore.toggleSideCollapse()">
        <IndentLeftIcon v-if="!appStore.sideCollapse"/>
        <IndentRightIcon v-else/>
      </home-header-item>
    </div>
    <div class="h-full flex gap-2px">
      <home-header-item v-if="authStore.userInfo">
        {{ authStore.userInfo.userName }}
      </home-header-item>
      <home-header-item tooltip-content="主题" @click="appStore.toggleDarkMode()">
        <dark-mode-switch :show-color="false" :is-button="false"/>
      </home-header-item>
      <home-header-item tooltip-content="修改密码" @click="onUpdatePwd">
        <SettingIcon/>
      </home-header-item>
      <home-header-item tooltip-content="退出登录" @click="onLogout">
        <LogoutIcon/>
      </home-header-item>
    </div>
  </div>
  <update-pwd :show="showUpdatePwd" @close="onHideUpdatePwd"></update-pwd>
</template>

<script setup lang="ts">
import HomeLogo from "@/components/common/home-logo.vue";
import HomeHeaderItem from "@/views/home/components/home-header-item.vue";
import {IndentLeftIcon, IndentRightIcon, LogoutIcon, SettingIcon} from "tdesign-icons-vue-next";
import {DialogPlugin} from "tdesign-vue-next";
import DarkModeSwitch from "@/components/common/dark-mode-switch.vue";
import {useAppStore} from "@/store/modules/app/index.js";
import {useAuthStore} from "@/store/modules/auth/index.js";
import {useRouter} from "vue-router";
import {ref, type Ref} from "vue";
import UpdatePwd from "@/views/home/components/update-pwd.vue";
import {useCacheStore} from "@/store/modules/cache";
import {managerLogout} from "@/service/api/self.ts";

const appStore = useAppStore();
const authStore = useAuthStore();
const cacheStore = useCacheStore();
const router = useRouter();

const onLogout = () => {
  const confirmDia = DialogPlugin({
    header: '退出登录',
    body: '确定要退出登录吗?',
    confirmBtn: {
      content: '退出登录',
      variant: 'base',
      theme: 'danger',
    },
    cancelBtn: '取消',
    onConfirm: () => {
      managerLogout().then(() => {
        authStore.clearToken();
        cacheStore.clearTag();
        confirmDia.hide();
        router.replace("/login")
      })
    },
    onClose: () => {
      confirmDia.hide();
    },
  });
}

const showUpdatePwd: Ref<boolean> = ref(false);

const
    onUpdatePwd = () => {
      showUpdatePwd.value = true;
    }
const onHideUpdatePwd = () => {
  showUpdatePwd.value = false;
}

if (authStore.isSimplePwd) {
  showUpdatePwd.value = true;
}
</script>

<style lang="scss" scoped>
</style>